<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #wrap{
            width: 100%;
            height: 4200px;
            border: 1px red dashed;
        }
        #header{
            width: 1000px;
            height: 550px;
            border: 1px blue dashed;
            margin: 0 auto;
        }
        #head1{
            width: 1000px;
            height: 50px;
            background-color: aqua;
            margin:0 auto;
        }
        #head2{
            width: 1000px;
            height: 160px;
            background-color: red;
        }
        #head3{
            width: 1000px;
            height: 60px;
            background-color: aquamarine;
        }
        #head4{
            width: 1000px;
            height: 280px;
            background-color: blue;
        }
        #body{
            width: 1000px;
            height: 2600px;
            border: 1px red dashed;
            margin: 0 auto;
        }
        #body1{
            width: 1000px;
            height: 335px;
            /* background-color: blueviolet; */
            margin-top: 45px;
            /* position: relative; */
        }
        #body2{
            width: 1000px;
            height: 680px;
            background-color:antiquewhite;
            margin-top: 60px;
        }
        #body3{
            width: 1000px;
            height: 680px;
            background-color:burlywood;
            margin-top: 60px;
        }
        #body4{
            width: 1000px;
            height: 680px;
            background-color:chocolate;
            margin-top: 60px;
        }
        #bottom{
            width: 1000px;
            height: 1030px;
            border: 1px blue dashed;
            margin: 0 auto;
        }
        #bottom1{
            width: 1000px;
            height: 85px;
            background-color: chartreuse;
            margin-top: 60px;
        }
        #bottom2{
            width: 1000px;
            height: 420px;
            background-color: turquoise;
            margin-top: 50px;
        }
        #bottom3{
            width: 1000px;
            height: 130px;
            background-color: violet;
        }
        #bottom4{
            width: 1000px;
            height: 110px;
            background-color: tomato;
            margin-top: 75px;
        }
        #bottom5{
            width: 1000px;
            height: 50px;
            background-color: thistle;
            margin-top: 50px;
        }
        #body1-1{
            width: 190px;
            height: 222px;
            float: left;
        }
        #body1-2{
            width: 810px;
            height: 222px;
            float: left;
        }
        .body1-2-1{
            width: 182px;
            height: 91px;
            float: left;
            box-shadow:0 0 0px 0px rgba(0,0,0,0.1);
        }
        .body1-2-1 img{
            width:202.5px ;
            /* height: 111px; */
            margin-top: 11px;

        }
        .body1-2-1:hover{
            transition: all 0.35s linear 0s;
            box-shadow:10 10 10px 1px rgba(0,0,0,0.1 );    
        }
        div{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id="head1">顶栏</div>
            <div id="head2">搜索栏</div>
            <div id="head3">功能栏</div>
            <div id="head4">轮播图</div>
        </div>
        <div id="body">
            <div id="body1">
                <div id="body1-1"><img src="images/body1.jpg" alt=""></div>
                <div id="body1-2">
                    <div class="body1-2-1"><img src="images/body2.jpg" alt=""></div>
                    <div class="body1-2-1"><img src="images/body2.jpg" alt=""></div>
                    <div class="body1-2-1"><img src="images/body2.jpg" alt=""></div>
                    <div class="body1-2-1"><img src="images/body2.jpg" alt=""></div>
                    <div class="body1-2-1"><img src="images/body3.jpg" alt=""></div>
                    <div class="body1-2-1"><img src="images/body4.jpg" alt=""></div>
                    <div class="body1-2-1"><img src="images/body5.jpg" alt=""></div>
                    <div class="body1-2-1"><img src="images/body6.jpg" alt=""></div>
                </div>
            </div>
            <div id="body2">千兆宽带 智能上网</div>
            <div id="body3">智慧家庭 美好生活</div>
            <div id="body4">更多服务 在线查询</div>
        </div>
        <div id="bottom">
            <div id="bottom1">中国电信 正品保证 品牌厂家 新品上市 全场商品</div>
            <div id="bottom2">购物指南 物流配送 支付方式 售后服务 便民服务</div>
            <div id="bottom3">合作伙伴</div>
            <div id="bottom4">营业执照</div>
            <div id="bottom5">客服热线</div>
        </div>
    </div>
</body>
</html>